
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山海夭华-用户中心</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/upubliccss.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/adindexcss.css">
    <script src="${pageContext.request.contextPath }/js/jquery-1.10.2.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/form.js"></script><!--此文件要放在jquery下方-->
    <script src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/publicjs.js"></script>
    <style type="text/css">
        a:hover {
            text-decoration: none;
        }

        a:link {
            text-decoration: none;
        }

        .nav-bg {
            background-color: #fff;
        }

        .nav-bg ul li .nav-li-link {
            color: #3c3c3c;
        }

        .nav-bg .my-circle {
            border: 2px solid rgba(0, 0, 0, 0.3);
            color: #3c3c3c;
        }

        .nav-vrule {
            background-color: #3c3c3c;
        }

        .wrap-all {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }

        .position-alert {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .copyright {
            font-size: 12px;
            color: #999;
            margin: 0;
            padding: 20px 0;
            letter-spacing: 6px;
            border-top: 1px solid #fff;
        }

        .slo-vertical {
            font-size: 18px;
            display: inline;
            font-weight: bold;
            vertical-align: middle
        }

        .panel-body {
            padding: 0;
        }

        .two-menu {
            margin: 0;
            padding: 0
        }

        .two-menu li {
            transition: .5s;
        }

        .two-menu li a {
            padding: 10px 0;
            display: block;
            transition: .5s;
            color: #000;
        }

        .two-menu li a:hover {
            border-radius: 4px;
            background-color: #007cba;
            color: #fff;
        }

        .two-menu li:hover {
            background-color: #007cba;
        }

        .two-menu li:hover a {
            transform: translateX(6px);
        }

        .upfile {
            cursor: pointer;
        }

        /*本页单独样式*/
        .user-list {
            width: 100%;
            padding: 0;
        }

        .user-list ul:nth-of-type(1) li {
            color: #007cba;
        }

        .user-list ul:nth-of-type(1) li a {
            display: block;
            color: #007cba;
            padding: 10px 0;
        }

        .user-list ul {
            padding: 0;
            margin: 0;
        }

        .user-list ul:hover {
            background-color: #f0f0f0;
            transition: .5s;
        }

        /*.user-list ul li {*/
        /*    width: 14%;*/
        /*    padding: 10px 0;*/
        /*    font-size: 16px;*/
        /*    font-weight: bold;*/
        /*    vertical-align: middle;*/
        /*    white-space: nowrap;*/
        /*    text-overflow: ellipsis;*/
        /*    overflow: hidden;*/
        /*}*/

        .user-list ul li:nth-of-type(n+1){
            text-align: left;
        }
        .user-list ul li:nth-of-type(3){
            width: 20%;
        }
        .user-list ul li:nth-of-type(5){
            width: 5%;
        }
        .user-list ul li:nth-of-type(1),
        .user-list ul li:nth-of-type(5),
        .user-list ul li:nth-of-type(6),
        .user-list ul li:nth-of-type(7),
        .user-list ul li:nth-of-type(9){
            text-align: center;
        }
        .user-list ul li:nth-of-type(1),
        .user-list ul li:nth-of-type(2),
        .user-list ul li:nth-of-type(6),
        .user-list ul li:nth-of-type(7) {
            width: 6%;
        }

        .show-list ul li {
            padding: 4px;
        }

        .main-list li a {
            display: inline-block;
            color: #0f0f0f;
        }

        .user-list ul li img {
            box-shadow: 0 0 4px #c0c0c0;
        }

        /*.moredescb span:hover{
            position: fixed;
            border: 1px solid #000;
            transition: .5s;
            width: 200px;
            min-height: 50px;
            line-height: 50px;
        }*/
        @media ( min-width: 768px) {
            .mobile-change {
                padding-right: 0 !important;
            }
        }

        @media ( max-width: 768px) {
            .mobile-change {
                padding-right: 15px !important;
            }
        }
    </style>
</head>
<body>
<div id="head" class="header-page" style="height: 102px; background-color: #fff">
    <%@ include file="pub_header.jsp" %>
</div>

<div class="container-fluid" style="margin-bottom: 80px; margin-top: 50px">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-2 mobile-change">
                    <%@ include file="pub_leftpage.jsp" %>
                </div>
                <div class="col-md-10">
                    <div style="width: 100%; min-height: 1000px; background-color: #fff; padding: 50px 20px 50px 20px;">
                        <h3 class="titleinfo" style="position: relative; margin-bottom: 20px"><span>商品管理</span></h3>
                        <div class="container-fluid" style="padding: 0">
                            <div class="row">
                                <div class="col-lg-12" style="padding: 20px 10px">
                                    <a href="${pageContext.request.contextPath }/admin/topage?page=pro_add" class="btn btn-primary">添加商品</a>
                                    <a href="${pageContext.request.contextPath }/admin/topage?page=pro_manage_sort" class="btn btn-warning">分类管理</a>
                                </div>
<%--                                <div class="user-list">--%>
<%--                                    <h3>基础信息</h3>--%>
<%--                                    <span>点击修改查看详情信息</span>--%>
<%--                                    <ul class="list-inline">--%>
<%--                                        <li><a href="#">编号</a></li>--%>
<%--                                        <li><a href="#">商品名</a></li>--%>
<%--                                        <li><a href="#">产品描述</a></li>--%>
<%--                                        <li><a href="#">类别名称</a></li>--%>
<%--                                        <li><a href="#">价格</a></li>--%>
<%--                                        <li><a href="#">S码库存</a></li>--%>
<%--                                        <li><a href="#">L码库存</a></li>--%>
<%--                                        <li><a href="#">M码库存</a></li>--%>
<%--                                        <li><a href="#">库存</a></li>--%>
<%--                                        <li><a href="#">上架时间</a></li>--%>
<%--                                        <li><a href="#">管理</a></li>--%>
<%--                                    </ul>--%>
<%--                                    <div class="loading text-center">--%>
<%--                                        <span style="font-size: 18px">数据加载中 </span>--%>
<%--                                        <img src="${pageContext.request.contextPath}/images/timg.gif"--%>
<%--                                             width="30px">--%>
<%--                                    </div>--%>
<%--                                </div>--%>



                                <table class="table table-striped table-bordered" id="areaAdmins-table">
                                    <thead>
                                    <tr>
                                        <th scope="col"><input type="checkbox" id="check_all"></th>
                                        <th scope="col" class="col-lg-1">编号</th>
                                        <th scope="col" class="col-lg-2">商品名</th>
                                        <th scope="col" class="col-lg-1">产品描述</th>
                                        <th scope="col" class="col-lg-1">类别名称</th>
                                        <th scope="col" class="col-lg-1">价格</th>
                                        <th scope="col" class="col-lg-1">S码库存</th>
                                        <th scope="col" class="col-lg-1">L码库存</th>
                                        <th scope="col" class="col-lg-1">M码库存</th>
                                        <th scope="col" class="col-lg-2">上架时间</th>
                                        <th scope="col" class="col-lg-3">管理</th>
                                    </tr>
                                    </thead>
                                    <tbody id="empInfo">
                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--锚点-->
<div class="float text-center">
    <a href="#head" title="回到顶部"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>

<div class="footer-page copyright text-center">
    <p>Copyright © 2021 MOUTAIN AND SEA WOHUA. All Rights Reserved</p>
</div>

<script>
    $(function () {
        $(".upfile").click(function () { //点击按钮触发文件上传
            $("#inputfile").click(); //相当于点击了文件上传
            $("#inputfile").on("change", function () {
                var objUrl = getObjectURL(this.files[0]); //调用函数传参，获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $(".showdeadimg img").css("display", "block");
                    $(".showdeadimg img").attr("src", objUrl); //将图片路径存入src中，显示出图片
                }
            });
        });


        /*加载商品数据列表*/
        $.ajax({
            url: "${pageContext.request.contextPath }/adminproduct/productlist",
            success: function (date) {
                var html = "";
                for (var i = 0; i < date.pro_all_list.length; i++) {
                    var prolists = date.pro_all_list[i];
                    html += "<ul class='list-inline main-list'>\n" +
                        // "                            <li><span>×</span></li>\n" +
                        "                            <li>"+prolists.pid+"</li>\n" +
                        "                            <li><img src='${pageContext.request.contextPath }/statics/upprodectimg/"+prolists.pimg+"' alt='' width='80px'><span title='"+prolists.pname+"'> "+prolists.pname+"</span></li>\n" +
                        "                            <li class='moredescb'><span>"+prolists.descb+"</span></li>\n" +
                        "                            <li>"+prolists.cname+"</li>\n" +
                        "                            <li>￥"+prolists.price+"</li>\n" +
                        "                            <li>"+prolists.stock+"</li>\n" +
                        "                            <li>"+prolists.stockS+"</li>\n" +
                        "                            <li>"+prolists.stockM+"</li>\n" +
                        "                            <li>"+prolists.stockL+"</li>\n" +
                        "                            <li>"+prolists.bytime+"</li>\n" +
                        "                            <li>\n" +
                            "                            <a href='${pageContext.request.contextPath}/adminproduct/proalter?pid="+prolists.pid+"' class='btn btn-default'>修改</a>\n" +
                        "                                <button type='button' class='btn btn-warning' onclick='delProduct("+prolists.pid+")'>删除</button>\n" +
                        "                            </li>\n" +
                        "                        </ul>";
                }
                setTimeout(function () {
                    $(".loading").css("display", "none");
                    $(".user-list").append(html);
                }, 100);

                /*$(".allpage").text(date.page_info.totalPage);
                $(".thispage").text(date.page_info.currentPage);

                if (date.page_info.hasPrePage) {  //是否有上一页
                    $(".hasper").css("display", "inline-block");
                    $(".noper").css("display", "none");
                } else {
                    $(".hasper").css("display", "none");
                    $(".noper").css("display", "inline-block");
                }
                if (date.page_info.hasNextPage) {  //是否有下一页
                    $(".hasnext").css("display", "inline-block");
                    $(".nonext").css("display", "none");
                } else {
                    $(".hasnext").css("display", "none");
                    $(".nonext").css("display", "inline-block");
                }*/
            }
        });
    });

    function delProduct(id) {
        if(confirm("你确定要删除这件商品吗？")){
            $.post(
                "${pageContext.request.contextPath}/adminproduct/delProduct",
                {pid:id},
                function (date) {
                    if(date.delPro_res>0){
                        alert("删除成功！");
                        window.location.reload();
                    }else{
                        alert("删除失败！");
                    }
                }
            );
        }
    }



    $(function () {

        to_page();
    });
    function to_page() {
        $.ajax({
            url: "${pageContext.request.contextPath }/adminproduct/products",
            type: "GET",
            dataType: "json",
            headers:{
                Accept:"application/json;charset=utf-8",
            },

            beforeSend: function () {
                $("#areaAdmins-table tbody").empty();
                $("#areaAdmins-table tfoot").empty();
                $("#areaAdmins-table tbody").append("<tr><td colspan='12'>正在加载数据，请稍后...</td></tr>");
            },
            success: function (result) {
                if (result.code == 100) {
                    //查询成功，解析并显示数据
                    //1、显示院校管理员信息
                    build_areaAdmins_table(result);
                    //2、显示分页信息
                    build_page_nav(result);
                } else {

                }
            },
            error: function () {
                $("#areaAdmins-table tbody").empty();
                $("#areaAdmins-table tfoot").empty();
                $("#areaAdmins-table tbody").append("<tr><td colspan='6'>查询出错，请稍后再试！</td></tr>");
            }
        });
    }

    function build_areaAdmins_table(result) {
        $("#areaAdmins-table tbody").empty();
        var products = result.extend.pageInfo.list;
        console.log(products)

        $.each(products, function (index,product) {
            var chkTd = $("<td></td>").addClass("tdCenter").append($("<input>").addClass("check_item").attr({"type": "checkbox"}));
            var pid = $("<td></td>").append(product.pid);
            var pimg = $("<td></td>").append("<span title='"+product.pname+"'> "+product.pname+"</span><img src='${pageContext.request.contextPath }/statics/upprodectimg/"+product.pimg +"' alt='' width='80px'>");
            var descb = $("<td></td>").append(product.descb);
            var cname=$("<td></td>").append(product.cname);
            var price = $("<td></td>").append(product.price);
            var stockS = $("<td></td>").append(product.stockS);
            var stockM = $("<td></td>").append(product.stockM);
            var stockL = $("<td></td>").append(product.stockL);
            var bytime = $("<td></td>").append(product.bytime);

        <%--<a href='${pageContext.request.contextPath}/adminproduct/proalter?pid="+prolists.pid+"' class='btn btn-default'>修改</a>\n" +--%>
        <%--    "                                <button type='button' class='btn btn-warning' onclick='delProduct("+prolists.pid+")'>删除</button>\n" +--%>
            var editBtn = $("<a href='${pageContext.request.contextPath}/adminproduct/proalter?pid="+product.pid+"'/>").addClass("btn btn-sm btn-primary")
                .append($("<span></span>").addClass("glyphicon glyphicon-edit")).append(" 修改");
            var delBtn = $("<button></button>").addClass("btn btn-sm btn-danger delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-remove")).append(" 删除");
            var stateBtn = $("<button></button>").addClass("btn btn-sm btn-secondary state_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-lock")).append("下架");
            delBtn.attr("delete-id", product.pid);
            var productOperationDiv = $("<div></div>").addClass("input-group").append($("<span></span>").addClass("input-group-btn").append(editBtn).append(delBtn).append(stateBtn));
            var productOperationTd = $("<td></td>").addClass("tdCenter").append(productOperationDiv);


            $("<tr></tr>").append(chkTd)
                .append(pid)
                .append(pimg)
                .append(descb)
                .append(cname)
                .append(price)
                .append(stockS)
                .append(stockM)
                .append(stockL)
                .append(bytime)
                .append(productOperationTd)
                .appendTo("#areaAdmins-table tbody");
        });
    }


    function build_page_nav(result) {
        $("#areaAdmins-table tfoot").empty();

        var deleteBtnS =$("<li></li>").append($("<a></a>").attr("id", "products_delete_all_btn").append($("<span></span>").addClass("glyphicon glyphicon-remove").append("批量删除")));
        var operatorUl = $("<ul></ul>").addClass("pagination pull-left").attr("style", "margin: 0 0 0 0;");
        operatorUl.append(deleteBtnS);

        var pageUl = $("<ul></ul>").addClass("pagination").attr("style", "margin: 0 0 0 0;");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页"));
        ;
        if (result.extend.pageInfo.isFirstPage) {
            firstPageLi.addClass("disabled");
        } else {
            firstPageLi.click(function () {
                to_page(2);
            });
        }
        pageUl.append(firstPageLi);

        var previousPageLi = $("<li></li>").append($("<a></a>").append("《"));
        if (result.extend.pageInfo.hasPreviousPage) {
            previousPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        } else {
            previousPageLi.addClass("disabled");
        }
        pageUl.append(previousPageLi);
        $.each(result.extend.pageInfo.navigatepageNums, function (index, npNum) {
            var pageLi = $("<li></li>").append($("<a></a>").append(npNum));
            if (result.extend.pageInfo.pageNum == npNum) {
                pageLi.addClass("active");
            } else {
                pageLi.click(function () {
                    to_page(npNum);
                });
            }
            pageUl.append(pageLi);
        });
        var nextPageLi = $("<li></li>").append($("<a></a>").append("》"));
        if (result.extend.pageInfo.hasNextPage) {
            nextPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum + 1);
            });
        } else {
            nextPageLi.addClass("disabled");
        }
        pageUl.append(nextPageLi);
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页"));
        if (result.extend.pageInfo.isLastPage) {
            lastPageLi.addClass("disabled");
        } else {
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
        }
        pageUl.append(lastPageLi);

        var pageInfoUl = $("<ul></ul>").addClass("pagination pull-right").attr("style", "margin: 0 0 0 0;");
        var pageInfoLi = $("<li></li>").addClass("disabled").append($("<a></a>").attr("style", "border: 0px").append("当前第 " + result.extend.pageInfo.pageNum + " 页，总 "
            + result.extend.pageInfo.pages + " 页，总 "
            + result.extend.pageInfo.total + " 条记录"));
        pageInfoUl.append(pageInfoLi);

        pn = result.extend.pageInfo.pageNum;

        var pageNavTd = $("<td></td>").addClass("text-center")
            .attr({"colspan": 12}).append(operatorUl).append(pageUl).append(pageInfoUl);

        $("<tr></tr>").append(pageNavTd)
            .appendTo("#areaAdmins-table tfoot");
    }

    //单个删除
    $(document).on("click", ".delete_btn", function () {
        var userName = $(this).parents("tr").find("td:eq(1)").text();
        if (confirm("确认删除[ " + userName + " ]吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath }/adminproduct/delProducts/" + $(this).attr("delete-id"),
                type: "delete",
                dataType: "json",
                headers:{
                    Accept:"application/json;charset=utf-8",
                },
                success: function (result) {
                    alert(result.msg);
                    if (result.code = 100) {
                        //删除成功
                        //刷新用户列表显示
                        to_page(1);
                    }
                }
            });
        }
    });

    //全选全不选
    $("#check_all").click(function () {
        //attr用于获取自定义的属性值，prop用于获取或修改原生的
        // alert($(this).prop("checked"))
        $(".check_item").prop("checked", $(this).prop("checked"));
    })
    $(document).on("click", ".check_item", function () {
        var flg = $(".check_item").length == $(".check_item:checked").length;
        $("#check_all").prop("checked", flg);
    })

    //批量删除
    $(document).on("click", "#products_delete_all_btn", function () {
        var userNames = "", ids = "";
        $.each($(".check_item:checked"), function () {
            userNames = userNames + $(this).parents("tr").find("td:eq(2)").text() + ",";
            ids = ids + $(this).parents("tr").find("td:eq(10)").find(".delete_btn").attr("delete-id") + "-";
        });
        userNames = userNames.substring(0, userNames.length - 1);
        ids = ids.substring(0, ids.length - 1);
        if (confirm("确认删除[ " + userNames + " ]吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath }/adminproduct/delProducts/" + ids,
                type: "delete",
                dataType: "json",
                headers:{
                    Accept:"application/json;charset=utf-8",
                },
                success: function (result) {
                    alert(result.msg);
                    if (result.code = 100) {
                        //删除成功
                        //刷新列表显示
                        to_page(1);
                        $("#check_all").prop("checked", false);
                    }
                }
            });
        }
    });
</script>
</body>
</html>
